import React, { useEffect,useState } from 'react';
import {Popover,Layout,Select,Form,Radio, Input, InputNumber, Button,Row, Col} from 'antd'
import style from '../work/work.css'
import * as myConst from './moneyMessage'
const { Content } = Layout;
// const { Option } = Select;

function money(){
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 8 },
  };
  const validateMessages = {
    // eslint-disable-next-line no-template-curly-in-string
    required: "'${label}'是必选字段"
  };
  let initvalue={
    rmb:"",
    isSocial:1,
    basermb:0,
    base:0,
    accFund:1,
    accfundlist:0,
    accfundrmb:0,
    accfundPercentage:12,
    isSpecial:1,
    childEdu:0,
    continuingEdu:0,
    elder:0,
    elderMoney:0,
    loan:0,
    rental:0,

  }
  const [isSubmit,setIssubmit] =useState(false);
  const [isBase,setIsbase] =useState(true);
  const [isBaseDisabled,setIsbaseDisabled] =useState(true);
  const [isAcc,setIsAcc] =useState(true);
  const [isAccDisabled,setIsAccDisabled] =useState(true);
  const [isSpe,setIsSpe] =useState(true);
  const [isElder,setIsElder] =useState(true);

  const [isFormList] =useState(initvalue);
  const [form] = Form.useForm();
  /**
   * 睡前收入,公司成本,个人缴纳公积金,公司缴纳公积金,个人缴纳社保,公司缴纳社保,专项扣除免税总额
   * 工资额度，税后总和，个税总额
   */
  let result={
    sleepMoney:0,
    companyCost:0,
    personalAccfundrmb:0,
    companyAccfundrmb:0,
    personalBasermb:0,
    companyBasermb:0,
    specialMoney:0,
    moneyList:[
    ],
    allmyMoney:0,
    unallmyMoney:0,
  }
  const [resultList,setResultList]=useState(result)

  const onFinish = (values) => {
    console.log(values);
    //校验公式
    resultList.allmyMoney = 0;
    resultList.sleepMoney = values.rmb*1;
    resultList.companyCost = values.rmb*1+values.rmb*0.16+values.rmb*(values.accfundPercentage/100);
    resultList.personalBasermb=values.rmb*0.08+values.rmb*0.02+values.rmb*0.002+3;
    resultList.companyBasermb=values.rmb*0.16+values.rmb*0.008+values.rmb*0.004+values.rmb*0.008+values.rmb*0.09;
    resultList.personalAccfundrmb=values.rmb*(values.accfundPercentage/100);
    resultList.companyAccfundrmb=values.rmb*(values.accfundPercentage/100);

    let specialMoney = values.childEdu+values.accFundcontinuingEdu+values.elderMoney+values.loan>0?values.loan:values.rental
    let firstMoney = values.rmb-resultList.personalBasermb-resultList.personalAccfundrmb;
    let souldMoney = values.rmb-resultList.personalBasermb-resultList.personalAccfundrmb-specialMoney-myConst.FIRSTLEVEL;

    resultList.moneyList=[];
    if(souldMoney>0){
      let moneyList1=0;
      for(let i=0;i<12;i++){
        moneyList1=moneyList1+souldMoney;
        console.log(moneyList1)
        if(myConst.LEVEL0<moneyList1&&moneyList1<=myConst.LEVEL1){
          resultList.moneyList.push({
            myMoney:firstMoney-(souldMoney*0.03),
            unmyMoney:souldMoney*0.03
          })
          moneyList1 = moneyList1-souldMoney*0.03;
          resultList.unallmyMoney=resultList.unallmyMoney+souldMoney*0.03;
          resultList.allmyMoney = resultList.allmyMoney+firstMoney-(souldMoney*0.03);
        }else if(myConst.LEVEL1<moneyList1&&moneyList1<=myConst.LEVEL2){
          if((moneyList1-souldMoney)<myConst.LEVEL1&&moneyList1>myConst.LEVEL1){
            let shui2_1 = myConst.LEVEL1-(moneyList1-souldMoney);
            let shui2_2 = moneyList1-myConst.LEVEL1;
            let shui2 = shui2_1*0.03+shui2_2*0.1;
            resultList.moneyList.push({
              myMoney:firstMoney-shui2,
              unmyMoney:shui2
            })
            moneyList1 = moneyList1-shui2;
            resultList.unallmyMoney=resultList.unallmyMoney+shui2;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui2;
          }else{
            let shui2 = souldMoney*0.1;
            resultList.moneyList.push({
              myMoney:firstMoney-shui2,
              unmyMoney:shui2
            })
            moneyList1 = moneyList1-shui2;
            resultList.unallmyMoney=resultList.unallmyMoney+shui2;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui2;
          }
        }else if(myConst.LEVEL2<moneyList1&&moneyList1<=myConst.LEVEL3){
          if((moneyList1-souldMoney)<myConst.LEVEL2&&moneyList1>myConst.LEVEL2){
            let shui3_1 = myConst.LEVEL2-(moneyList1-souldMoney);
            let shui3_2 = moneyList1-myConst.LEVEL2;
            let shui3 = shui3_1*0.1+shui3_2*0.2;
            resultList.moneyList.push({
              myMoney:firstMoney-shui3,
              unmyMoney:shui3
            })
            moneyList1 = moneyList1-shui3;
            resultList.unallmyMoney=resultList.unallmyMoney+shui3;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui3;
          }else{
            let shui3 = souldMoney*0.2;
            resultList.moneyList.push({
              myMoney:firstMoney-shui3,
              unmyMoney:shui3
            })
            moneyList1 = moneyList1-shui3;
            resultList.unallmyMoney=resultList.unallmyMoney+shui3;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui3;
          }
        }else if(myConst.LEVEL3<moneyList1&&moneyList1<=myConst.LEVEL4){
          if((moneyList1-souldMoney)<myConst.LEVEL3&&moneyList1>myConst.LEVEL3){
            let shui4_1 = myConst.LEVEL3-(moneyList1-souldMoney);
            let shui4_2 = moneyList1-myConst.LEVEL3;
            let shui4 = shui4_1*0.2+shui4_2*0.25;
            resultList.moneyList.push({
              myMoney:firstMoney-shui4,
              unmyMoney:shui4
            })
            moneyList1 = moneyList1-shui4;
            resultList.unallmyMoney=resultList.unallmyMoney+shui4;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui4;
          }else{
            let shui4 = souldMoney*0.25;
            resultList.moneyList.push({
              myMoney:firstMoney-shui4,
              unmyMoney:shui4
            })
            moneyList1 = moneyList1-shui4;
            resultList.unallmyMoney=resultList.unallmyMoney+shui4;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui4;
          }
        }else if(myConst.LEVEL4<moneyList1&&moneyList1<=myConst.LEVEL5){
          if((moneyList1-souldMoney)<myConst.LEVEL4&&moneyList1>myConst.LEVEL4){
            let shui5_1 = myConst.LEVEL4-(moneyList1-souldMoney);
            let shui5_2 = moneyList1-myConst.LEVEL4;
            let shui5 = shui5_1*0.25+shui5_2*0.3;
            resultList.moneyList.push({
              myMoney:firstMoney-shui5,
              unmyMoney:shui5
            })
            moneyList1 = moneyList1-shui5;
            resultList.unallmyMoney=resultList.unallmyMoney+shui5;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui5;
          }else{
            let shui5 = souldMoney*0.3;
            resultList.moneyList.push({
              myMoney:firstMoney-shui5,
              unmyMoney:shui5
            })
            moneyList1 = moneyList1-shui5;
            resultList.unallmyMoney=resultList.unallmyMoney+shui5;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui5;
          }
        }else if(myConst.LEVEL5<moneyList1&&moneyList1<=myConst.LEVEL6){
          if((moneyList1-souldMoney)<myConst.LEVEL5&&moneyList1>myConst.LEVEL5){
            let shui6_1 = myConst.LEVEL5-(moneyList1-souldMoney);
            let shui6_2 = moneyList1-myConst.LEVEL5;
            let shui6 = shui6_1*0.3+shui6_2*0.35;
            resultList.moneyList.push({
              myMoney:firstMoney-shui6,
              unmyMoney:shui6
            })
            moneyList1 = moneyList1-shui6;
            resultList.unallmyMoney=resultList.unallmyMoney+shui6;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui6;
          }else{
            let shui6 = souldMoney*0.35;
            resultList.moneyList.push({
              myMoney:firstMoney-shui6,
              unmyMoney:shui6
            })
            moneyList1 = moneyList1-shui6;
            resultList.unallmyMoney=resultList.unallmyMoney+shui6;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui6;
          }
        }else if(moneyList1>myConst.LEVEL6){
          if((moneyList1-souldMoney)<myConst.LEVEL6&&moneyList1>myConst.LEVEL6){
            let shui7_1 = myConst.LEVEL6-(moneyList1-souldMoney);
            let shui7_2 = moneyList1-myConst.LEVEL6;
            let shui7 = shui7_1*0.35+shui7_2*0.45;
            resultList.moneyList.push({
              myMoney:firstMoney-shui7,
              unmyMoney:shui7
            })
            moneyList1 = moneyList1-shui7;
            resultList.unallmyMoney=resultList.unallmyMoney+shui7;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui7;
          }else{
            let shui7 = souldMoney*0.45;
            resultList.moneyList.push({
              myMoney:firstMoney-shui7,
              unmyMoney:shui7
            })
            moneyList1 = moneyList1-shui7;
            resultList.unallmyMoney=resultList.unallmyMoney+shui7;
            resultList.allmyMoney = resultList.allmyMoney+firstMoney-shui7;
          }
        }
      }
      setResultList({resultList,...resultList});
      // 144000,300000,420000,660000,960000
    }else{
      for(let i=0;i<12;i++){
        resultList.allmyMoney = resultList.allmyMoney+firstMoney
        resultList.moneyList.push({
          myMoney:firstMoney,
          unmyMoney:0
        })
      }
      setResultList({resultList,...resultList});
    }

  }
  const onValuesChange=(changedValues, allValues)=>{
    console.log("onvalue",changedValues);
    console.log("onvalue2",allValues);
    if(changedValues.rmb){
      if(allValues.isSocial === 0){
        form.setFieldsValue({
          basermb:0
        });
      }else if(allValues.isSocial === 1&&allValues.base === 0){
        form.setFieldsValue({
          basermb:changedValues.rmb
        });
      }
      if(allValues.accFund === 0){
        form.setFieldsValue({
          accfundrmb:0
        });
      }else if(allValues.accFund === 1&&allValues.accfundlist === 0){
        form.setFieldsValue({
          accfundrmb:changedValues.rmb
        });
      }
    }
    if(changedValues.isSocial){
      if(changedValues.isSocial === 1){
        setIsbase(true);
      }else{
        setIsbase(false);
      }
    }
    if(changedValues.base){
      switch (changedValues.base) {
        case 0:
          form.setFieldsValue({basermb:allValues.rmb});
          setIsbaseDisabled(true)
          break;
        case 1:
          form.setFieldsValue({basermb:5360});
          setIsbaseDisabled(true)
          break;
        case 2:
          form.setFieldsValue({basermb:0});
          setIsbaseDisabled(false)
          break;
        default:
          break;
      }
    }
    if(changedValues.accFund){
      if(changedValues.accFund === 1){
        setIsAcc(true);
      }else{
        setIsAcc(false);
      }
    }
    if(changedValues.accfundlist){
      switch (changedValues.accfundlist) {
        case 0:
          form.setFieldsValue({accfundrmb:allValues.rmb});
          setIsAccDisabled(true)
          break;
        case 1:
          form.setFieldsValue({accfundrmb:1624});
          setIsAccDisabled(true)
          break;
        case 2:
          form.setFieldsValue({accfundrmb:0});
          setIsAccDisabled(false)
          break;
        default:
          break;
      }
    }
    if(changedValues.isSpecial){
      if(changedValues.isSpecial === 1){
        setIsSpe(true);
      }else{
        setIsSpe(false);
      }
    }
    if(changedValues.elder){
      if(changedValues.elder ===1){
        setIsElder(false)
      }else{
        setIsElder(true)
      }
    }
  }

  useEffect(()=>{

  })
  return (
    <Layout className={style.laywidth}>
      <Content style={{ padding: '0 50px' }}>
        <Form {...layout} name="nest-messages" form={form}  initialValues={isFormList} onFinish={onFinish} onValuesChange={onValuesChange}  validateMessages={validateMessages}>
          <Form.Item  name="rmb" label="税前基本工资"  rules={[{ required: true }]}>
            <Input.Password className={style.comwidth}/>
          </Form.Item>
          <Form.Item name="isSocial" label="是否缴纳社保">
            <Radio.Group>
              <Radio value={1}>缴纳</Radio>
              <Radio value={0}>不缴纳</Radio>
            </Radio.Group>
          </Form.Item>
          {isBase&&<><Form.Item name='base' label="社保缴纳基数" rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.BASE_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item><Form.Item name="basermb" label="社保基数">
            <Input disabled={isBaseDisabled} className={style.comwidth}/>
          </Form.Item></>}
          <Form.Item name="accFund" label="是否缴纳公积金">
            <Radio.Group>
              <Radio value={1}>缴纳</Radio>
              <Radio value={0}>不缴纳</Radio>
            </Radio.Group>
          </Form.Item>
          {isAcc&&<><Form.Item name='accfundlist' label="公积金缴纳基数" rules={[{ required: true }]}>
            <Select className={style.comwidth}>
              {
                myConst.BASE_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name="accfundrmb" label="公积金基数">
            <Input disabled={isAccDisabled} className={style.comwidth}/>
          </Form.Item><Form.Item name="accfundPercentage" label="公积金百分比">
            <Input suffix="%" className={style.comwidth}/>
          </Form.Item></>}
          <Form.Item name="isSpecial" label="是否包含专项扣除">
            <Radio.Group>
              <Radio value={1}>包含</Radio>
              <Radio value={0}>不包含</Radio>
            </Radio.Group>
          </Form.Item>
          {isSpe&&<><Form.Item name='childEdu' label="子女教育扣除">
            <Select className={style.comwidth}>
              {
                myConst.CHILD_EDU_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name='continuingEdu' label="继续教育扣除">
            <Select className={style.comwidth}>
              {
                myConst.CONTINUING_EDU_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name='elder' label="赡养老人扣除">
            <Select className={style.comwidth}>
              {
                myConst.ELDER_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          {isElder&&<Form.Item name='elderMoney' label="赡养老人扣除数额">
            <Select className={style.comwidth}>
              {
                myConst.ELDER_MONEY_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>}
          {!isElder&&<Form.Item name='elderMoney' label="赡养老人扣除数额">
            <InputNumber  className={style.comwidth}/>
          </Form.Item>}

          <Form.Item name='loan' label="住房贷款利息扣除">
            <Select className={style.comwidth}>
              {
                myConst.LOAN_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name='rental' label="住房租金扣除">
            <Select className={style.comwidth}>
              {
                myConst.RENTAL_LIST.map(item=>(
                  <options value={item.value} key={item.value}>{item.text}</options>
                ))
              }
            </Select>
          </Form.Item>
          </>}
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
        {!isSubmit&&<div className={style.submit}>
          <Row>
            <Col className={style.border} span={6}>睡前收入</Col>
            <Col className={style.border} span={6}>{resultList.sleepMoney}</Col>
            <Col className={style.border} span={6}>公司成本</Col>
            <Col className={style.border} span={6}>{resultList.companyCost}</Col>
          </Row>
          <Row>
            <Col className={style.border} span={6}>个人公积金</Col>
            <Col className={style.border} span={6}>{resultList.personalAccfundrmb}</Col>
            <Col className={style.border} span={6}>公司缴纳公积金</Col>
            <Col className={style.border} span={6}>{resultList.companyAccfundrmb}</Col>
          </Row>
          <Row>
            <Col className={style.border} span={6}>个人社保</Col>
            <Col className={style.border} span={6}>{resultList.personalBasermb}</Col>
            <Col className={style.border} span={6}>公司社保</Col>
            <Col className={style.border} span={6}>{resultList.companyBasermb}</Col>
          </Row>
          <Row>
            <Col className={style.border} span={6}>专项扣除</Col>
            <Col className={style.border} span={6}>{resultList.specialMoney}</Col>
            <Col className={style.border} span={6}></Col>
            <Col className={style.border} span={6}></Col>
          </Row>
          {
            resultList.moneyList.map((item,index)=>{
              return (
                <Row>
                  <Col className={style.border} span={6}>{index+1}月税后</Col>
                  <Col className={style.border} span={6}>{item.myMoney}</Col>
                  <Col className={style.border} span={6}>{index+1}月个税</Col>
                  <Col className={style.border} span={6}>{item.unmyMoney}</Col>
              </Row>
              )
            })
          }
          <Row>
            <Col className={style.border} span={6}>个人税后总和</Col>
            <Col className={style.border} span={6}>{resultList.allmyMoney}</Col>
            <Col className={style.border} span={6}>个税总和</Col>
            <Col className={style.border} span={6}>{resultList.unallmyMoney}</Col>
          </Row>

        </div>}
      </Content>
    </Layout>
  );
}

export default money;
